<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <title>color/transform.js - Documentation</title>
    
    
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <script src="scripts/nav.js" defer></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav >
    
    <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li><a href="color.html">color</a><ul class='methods'><li data-type='method'><a href="color.html#.setColorOpacity">setColorOpacity</a></li></ul></li><li><a href="data.html">data</a><ul class='methods'><li data-type='method'><a href="data.html#.getMax">getMax</a></li><li data-type='method'><a href="data.html#.getMin">getMin</a></li><li data-type='method'><a href="data.html#.getTotal">getTotal</a></li><li data-type='method'><a href="data.html#.toArray">toArray</a></li><li data-type='method'><a href="data.html#.toJson">toJson</a></li></ul></li><li><a href="date.html">date</a><ul class='methods'><li data-type='method'><a href="date.html#.dateFormat">dateFormat</a></li><li data-type='method'><a href="date.html#.getDate">getDate</a></li></ul></li><li><a href="is.html">is</a><ul class='methods'><li data-type='method'><a href="is.html#.isIDCard">isIDCard</a></li><li data-type='method'><a href="is.html#.isPhone">isPhone</a></li><li data-type='method'><a href="is.html#.isType">isType</a></li></ul></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">color/transform.js</h1>
    

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>/**
 * 设置色值透明度：输入色值和透明度，返回符合透明度的新色值
 * 
 * @memberof color
 * 
 * @param {String} color 色值(必传)
 * &lt;br />支持格式：hex,rgb,rgba
 * 
 * @param {Number} opacity 透明度(可选) 
 * &lt;br />范围:0 - 1
 * 
 * @returns  rgba 格式色值
 * 
 * @example  
 * setColorOpacity('#fff',0.5); // rgba(255,255,255,0.5)
 */
function setColorOpacity(color, opacity) {
    let c = color;
    // to varify color format
    const regHex = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    const regRGB =
        /^rgb\(([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\,([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\,([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\)$/i;
    const regRGBA =
        /^rgba\(([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\,([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\,([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\,(1|1.0|0.[0-9])\)$/i;

    // if hex，transform to rgb
    if (regHex.test(c)) {
        c = c.length === 4 ? c + c.slice(1, 4) : c // #000 格式补全6位
        const red = parseInt("0x" + c.slice(1, 3))
        const green = parseInt("0x" + c.slice(3, 5))
        const yellow = parseInt("0x" + c.slice(5, 7))
        c = `rgb(${red},${green},${yellow})`
    }

    // if rgb，transform to  rgba
    if (regRGB.test(c)) {
        const rgb = c.match(regRGB);
        c = `rgba(${rgb[1]},${rgb[2]},${rgb[3]},1)`
    }

    // if rgba , return color with opacity
    if (regRGBA.test(c)) {
        const rgba = c.match(regRGBA);
        if (opacity || opacity === 0) {
            return `rgba(${rgba[1]},${rgba[2]},${rgba[3]},${opacity})`
        } else {
            return c
        }
    } else {
        return 'wrong color value'
    }
}
module.exports.setColorOpacity = setColorOpacity
</code></pre>
        </article>
    </section>




    
    
</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.6</a> on Wed Feb 24 2021 16:40:34 GMT+0800 (中国标准时间) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>



</body>
</html>
